<template>
	<view>
		<view class="p-2 border-bottom d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				收货人：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.name" />
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				手机号码：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.phone" />
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				邮箱：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.email" />
		</view>
		<view class="p-2 border-bottom d-flex a-center bg-white span-20">
			<view class="font-md mr-1  text-secondary picker-width input-city d-flex">
				<view>所在地区：</view>
				<input placeholder="请选择省市区" disabled type="text" v-model="ruleForm.path" class="flex-1"
					@click="openPicker" />
				<cc-selectDity :province="ruleForm.province" :city="ruleForm.city" :area="ruleForm.district"
					:show="show" @changeClick="changeClick" @sureSelectArea="onsetCity"
					@hideShow="onhideShow"></cc-selectDity>
			</view>
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				详细地址：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="ruleForm.address" />
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				设为默认地址：</view>
			<switch class="ml-auto" color="#FD6801" :checked="ruleForm.default" @change="changeSwitch" />
		</view>
		<view class="p-3">
			<view class="text-center w-100 main-bg-color text-white font-md rounded py-2"
				hover-class="main-bg-hover-color" @click="submit">
				保 存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				
				show: false,
				index: 0,
				ruleForm: {
					name: '',
					phone: '',
					email: '',
					path: '',
					province: '安徽省',
					city: '合肥市',
					district: '新站区',
					address: '',
					default: 0
				},
				rules: {
					name: [{
						message: '请输入正确的用户名',
						rule: /^[\u4e00-\u9fa5]{2,10}$/
					}],
					phone: [{
						message: '请输入正确的手机号',
						rule: /^1[3-9]\d{9}$/

					}],
					email: [{
						message: '请输入正确的邮箱',
						rule: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
					}],
					path: [{
						message: '请输入正确的省市区',
						rule: /^[\u4e00-\u9fa5]+[a-zA-Z0-9]*$/
					}],
					address: [{
						message: '请输入正确的地址',
						rule: /^.{2,30}$/

					}]
				}
			}
		},
		onLoad(e) {
			this.index = e.key
		},
		computed: {
			...mapState({
				list: state => state.address.List
			})
		},
		mounted() {
			// this.ruleForm = this.list[this.index]
			this.ruleForm = Object.assign(this.ruleForm, this.list[this.index])
			this.ruleForm.path = this.ruleForm.province + this.ruleForm.city + this.ruleForm.district
		},
		methods: {
			validate(key) {
				let check = true;
				this.rules[key].forEach(v => {
					if (!v.rule.test(this.ruleForm[key])) {
						uni.showToast({
							title: v.message,
							icon: 'none'
						})
						check = false
					}
				})
				return check;
			},
			submit() {
				if (!this.validate('name')) {
					return;
				};
				if (!this.validate('phone')) {
					return;
				};
				if (!this.validate('email')) {
					return;
				};
				if (!this.validate('path')) {
					return;
				};
				if (!this.validate('address')) {
					return;
				};
			},
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},

			changeClick(value, value2, value3, value4) {

				console.log('地址选择器 = ' + value + value2 + value3 + value4);

				this.ruleForm.province = value;
				this.ruleForm.city = value2;
				this.ruleForm.district = value3;
			},
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.ruleForm.path = address
				console.log('qqqq',this.ruleForm.path);
			},
		}
	}
</script>

<style>

</style>